<template>
   <div class="user-level">
      <table-pro :columns="columns" :requestApi="getAdminList">
         <template #role="{ row }">
           {{ row.roles?.[0]?.name ?? '暂无' }}
         </template>
         <template #status="{ row }">
           <!-- {{ row.status ? '启用' : '禁用' }} -->
            <el-switch 
               :modelValue="row.status"
               size="small"
               active-text="启用" 
               inactive-text="禁用" 
            />
         </template>
         <template #createdAt="{ row }">
           {{ dayjs(row.createdAt).format('YYYY-MM-DD HH:mm:ss') }}
         </template>
         <template #action="{ row }">
           <el-button type="primary" size="small">编辑</el-button>
           <el-button type="danger" size="small">删除</el-button>
         </template>
      </table-pro>
   </div>
  </template>
  
  <script lang='ts' setup>
  import dayjs from 'dayjs'
  import { getAdminList } from '@/api/admin'
  // 定义管理员页面中表格列的数据
  const columns: ITableColumn[] = [
    { prop: 'username', label: '用户名' },
    { prop: 'nickname', label: '昵称' },
    { prop: 'phone', label: '手机号'},
    { prop: 'role', label: '角色', type: 'slot' },
    { prop: 'status', label: '状态', type: 'slot' },
    { prop: 'createdAt', label: '创建时间', type: 'slot' },
    { prop: 'action', label: '操作', type: 'slot' }
  ]
  </script>
  
  <style lang='scss' scoped>
  
  </style>
  